<template>
  <div style="padding: 10px">
    <div>
      <span class="jc-tip">安全验证</span>
    </div>

    <div>
      <span class="jc-msg">拖动下方滑块完成验证</span>
    </div>
    <div class="jc-range" :class="rangeStatus?'success':'default'" >
      <van-icon @mousedown="rangeMove" size="32px" :name="rangeStatus?successIcon:startIcon" v-if="isPC" />
      <van-icon @touchstart="rangeMoveMobile"size="32px" :name="rangeStatus?successIcon:startIcon" v-else></van-icon>
      {{rangeStatus?successText:startText}}
    </div>
  </div>
</template>

<script>
  export default {
    name: "SliderVerify",
    props: {
      //成功图标
      successIcon: {
        type: String,
        default: 'checked'
      },
      //成功文字
      successText: {
        type: String,
        default: '验证成功'
      },
      //开始的图标
      startIcon: {
        type: String,
        default: 'exchange'
      },
      //开始的文字
      startText: {
        type: String,
        default: '按住滑块，拖动到最右边'
      },
    },
    data() {
        return {
          isPc: false,
          disX: 0,
          rangeStatus: false
        }
    },
    created() {
      const os = this.os();
      if(os == 'mobile'){
        this.isPC = false
      }else if(os == 'pc'){
        this.isPC = true
      }
    },
    methods: {
      resetState(){
        this.disX = 0
        this.rangeStatus = false
      },
      os(){
        var ua = navigator.userAgent,
        isWindowsPhone = /(?:Windows Phone)/.test(ua),
        isSymbian = /(?:SymbianOS)/.test(ua) || isWindowsPhone,
        isAndroid = /(?:Android)/.test(ua),
        isFireFox = /(?:Firefox)/.test(ua),
        isChrome = /(?:Chrome|CriOS)/.test(ua),
        isTablet = /(?:iPad|PlayBook)/.test(ua) || (isAndroid && !/(?:Mobile)/.test(ua)) || (isFireFox && /(?:Tablet)/.test(ua)),
        isPhone = /(?:iPhone)/.test(ua) && !isTablet,
        isPc = !isPhone && !isAndroid && !isSymbian;
        if(isPc){
          return 'pc'
        }else {
          return 'mobile'
        }
      },
      //滑块移动
      rangeMove(e){
        let ele = e.target;
        let startX = e.clientX;
        let eleWidth = ele.offsetWidth;
        let parentWidth =  ele.parentElement.offsetWidth;
        let MaxX = parentWidth - eleWidth;
        if(this.rangeStatus){//不运行
          return false;
        }
        document.onmousemove = (e) => {
          let endX = e.clientX;
          this.disX = endX - startX;
          if(this.disX<=0){
            this.disX = 0;
          }
          if(this.disX>=MaxX-eleWidth){//减去滑块的宽度,体验效果更好
            this.disX = MaxX;
          }
          ele.style.transition = '.1s all';
          ele.style.transform = 'translateX('+this.disX+'px)';
          e.preventDefault();
        }
        document.onmouseup = ()=> {
          if(this.disX !== MaxX){
            ele.style.transition = '.5s all';
            ele.style.transform = 'translateX(0)';
            //执行失败的函数
            this.$emit('callback', false);
          }else{
            this.rangeStatus = true;
            //执行成功的函数
            let _this = this
            let t;
            clearTimeout(t)
            // 添加过渡动画
            t = setTimeout(function (){
              _this.$emit('callback', true);
            }, 1000);
          }
          document.onmousemove = null;
          document.onmouseup = null;
        }
      },
      rangeMoveMobile(e){
        let ele = e.target;
        let startX = e.changedTouches[0].clientX;
        let eleWidth = ele.offsetWidth;
        let parentWidth =  ele.parentElement.offsetWidth;
        let MaxX = parentWidth - eleWidth;
        if(this.rangeStatus){//不运行
          return false;
        }
        document.ontouchmove = (e) => {
          let endX = e.changedTouches[0].clientX;
          this.disX = endX - startX;
          if(this.disX<=0){
            this.disX = 0;
          }
          if(this.disX>=MaxX-eleWidth){//减去滑块的宽度,体验效果更好
            this.disX = MaxX;
          }
          ele.style.transition = '.1s all';
          ele.style.transform = 'translateX('+this.disX+'px)';
          //e.preventDefault();
        }
        document.ontouchend = ()=> {
          if(this.disX !== MaxX){
            ele.style.transition = '.1s all';
            ele.style.transform = 'translateX(0)';
            //执行失败的函数
            this.$emit('callback', false);
          }else{
            this.rangeStatus = true;
            //执行成功的函数
            let _this = this
            let t;
            clearTimeout(t)
            // 添加过渡动画
            t = setTimeout(function (){
              _this.$emit('callback', true);
            }, 1000);
          }
          document.ontouchmove = null;
          document.ontouchend = null;
        }
      },
    }
  }
</script>

<style scoped>
  .jc-tip{
    margin: 4px 0;
    font-size: 10px;
    color: gray;
  }
  .jc-msg{
    margin: 4px 0;
    font-size: 12px;
    font-weight: bold;
  }
  .jc-range{
    margin: 20px 0;
    padding: 2px 0px;
    position: relative;
    transition: 1s all;
    user-select: none;
    color: #333;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    height: 38px; /*no*/
  }
  .jc-range i{
    position: absolute;
    left: 0;
    width: 56px;/*no*/
    height: 100%;
    color: #919191;
    background-color: #fff;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .jc-range.success{
    background-color: #7AC23C;
    color: #fff;
  }
  .jc-range.success i{
    color: #7AC23C;
  }

  .jc-range.default{
    background-color: #e2e2e2;
    color: #8d8d8d;
  }
  .jc-range.default i{
    background-color: #f5f8ff;
  }
</style>